<template>
	<div class="groups_imgs">
		<div class="group_item_main_media_scroll" :style="{width:screenWidth+'px'}">
			<div class="group_item_main_media_scroll_item" :data-index="index" :style="{width:screenWidth+'px'}" :ref="'mediaScrollBoxItems_'+index">
				<img :src="media" :alt="media" v-for="(media, mediaindex) in item.imgs" :style="{width:screenWidth+'px'}" :class="item.imgs.length>1?'animated':''" :ref="'mediaScrollItems_'+mediaindex" :data-index="mediaindex" />
			</div>
		</div>
		<div class="group_item_main_button" v-if="item.imgs.length>1" :data-type="item.type" :data-refindex="index" :data-index="item.newsid" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" @click="handelDblclick"></div>
		<div class="group_item_main_button" :data-type="item.type" :data-index="item.newsid" :data-refindex="index" v-if="item.imgs.length>0&&item.imgs.length<=1" @click="handelDblclick"></div>
		<span class="group_item_main_media_scroll_button icon2 prev" :data-index="index" @click="prevClickHandle" v-if="item.imgs.length>1"></span>
		<span class="group_item_main_media_scroll_button icon2 next" :data-index="index" @click="nextClickHandle" v-if="item.imgs.length>1"></span>
		<span class="group_item_main_media_scroll_goods icon2 goodsed animated" :data-index="index" :ref="'goodsShow_'+index"></span>
		<!--div class="group_item_main_tags">
			<i class="icon tags"></i>
		</div-->
	</div>
</template>
<script>
	export default {
		name: "groups_imgs",
		data: function(){
			return {
				currentElement:null,
				currentValue:-1,
				currentElementIndex:0,
				bblclickTime:0,
				goodedTimout:null,
				start:{
					x:0,
					y:0
				},
				end:{
					x:0,
					y:0
				},
				delta:{
					x:0,
					y:0
				}
			}
		},
		props:["item","screenWidth","index", "len"],
		mounted:function(){
			this.play(1, true)
		},
		methods:{
			calculateAngle:function (startPoint, endPoint) {
				var x = startPoint.x - endPoint.x;
				var y = endPoint.y - startPoint.y;
				var r = Math.atan2(y, x); 
				var angle = Math.round(r * 180 / Math.PI);
				if (angle < 0) {
					angle = 360 - Math.abs(angle);
				}
				return angle;
			},
			calculateDirection:function (startPoint, endPoint) {
				var angle = this.calculateAngle(startPoint, endPoint);
				if ((angle <= 45) && (angle >= 0)) {
					return "left";
				} else if ((angle <= 360) && (angle >= 315)) {
					return "left";
				} else if ((angle >= 135) && (angle <= 225)) {
					return "right";
				} else if ((angle > 45) && (angle < 135)) {
					return "down";
				} else {
					return "up";
				}
			},
			play:function(v, bool){
				const that = this;
				//that.$nextTick(() => {
					if (that.$props.len > 0){
						const children = that.$refs["mediaScrollBoxItems_"+that.$props.index].children,
							count = children.length,
							cv = that.$data.currentValue+v >= count ? 0 : that.$data.currentValue+v < 0 ? count-1 : that.$data.currentValue+v;
						if (children.length>1){
							let next = 0;
							that.$set(that, "currentValue", cv);
							[].slice.call(children).forEach((item) => (item.className = "animated", item.style.cssText= "width:"+screen.width+"px"));
							if (v<0){ //left
								next = cv === 0 ? cv-v : cv+v <0 ? count-1 : cv === count-1 || cv+v >= count-1 ? 0 : cv-v ;
								children[cv].className = "animated fadeInLeft";
								children[next].className = "animated fadeOutRight";
								children[cv].style.cssText = "width:"+screen.width+"px;z-index: 2";
								children[next].style.cssText = "width:"+screen.width+"px;z-index: 1";
							}else if (v>0){ //right
								next = cv === 0 ? count-1 : cv-v <0 ? 0 : cv-v >= count ? 0 : cv-v;
								children[cv].className = "animated fadeInRight";
								children[next].className = "animated fadeOutLeft";
								children[cv].style.cssText = "width:"+screen.width+"px;z-index: 2";
								children[next].style.cssText = "width:"+screen.width+"px;z-index: 1";
							}
							that.$emit("setGroupsImgsDian", cv, that.$props.index);
						}
					}
				//});
			},
			getScrollRefElem:function(e){
				//const that = this,
					//target = (e.nodeType === 1 && e) || e.target;
				//const index = target.getAttribute("data-refindex"),
					//refElem = that.$refs["mediaScrollBoxItems_"+index][0];
				//that.$set(that, "currentElement", refElem);
				//that.$set(that, "currentElementIndex", index);
				return new Promise((a,b) => a(1));
			},
			prevClickHandle:function(e){
				const that = this;
				return that.getScrollRefElem(e).then(() => {
					that.play(-1)
				});
			},
			nextClickHandle:function(e){
				const that = this;
				return that.getScrollRefElem(e).then(() => {
					that.play(1)
				});
			},
			handleTouchStart:function(e){
				this.getScrollRefElem(e);
				const touch = e.touches[0];
				this.$set(this, "start", {
					x: touch.pageX,
					y: touch.pageY
				});
				this.$set(this, "delta", {
					x: 0,
					y: 0
				});
			},
			handleTouchMove:function(e){
				const touch = e.touches[0];
				this.$set(this, "end", {
					x: touch.pageX,
					y: touch.pageY
				});
				this.$set(this, "delta", {
					x: touch.pageX - this.$data.start.x,
					y: touch.pageY - this.$data.start.y
				});
			},
			handleTouchEnd:function(e){
				const dir = this.calculateDirection(this.$data.start, this.$data.end),
					a = 150,
					delta = this.$data.delta;
				if ((delta.x < -a || delta.x > a) || (delta.y < -a || delta.y > a)){
					console.log(dir);
					this.play(dir === 'left' ? -1 : 1);
				}
			},
			handelDblclick:function(e){
				if (this.$props.item.typeId !== '10003'){
					const that = this,
						index = e.target.getAttribute("data-index"),
						refindex = e.target.getAttribute("data-refindex"),
						type = e.target.getAttribute("data-type"),
						endTime = new Date().getTime();
					if (endTime - that.$data.bblclickTime < 500){
						const c = $(that.$refs["goodsShow_"+refindex]);
						c.removeClass('zoomIn on').addClass('zoomIn on');
						that.goodedTimout && clearTimeout(that.goodedTimout);
						that.goodedTimout = setTimeout(function(){
							c.removeClass('zoomIn on')
						}, 800);
						that.$emit("setFeedsDataIsGoods", index, type);
					}else{
						that.$set(that, 'bblclickTime', new Date().getTime());
					}
				}
			}
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	.groups_imgs{
		.group_item_main_media_scroll_button{
			position:absolute;
			z-index: 3;
		}
		.group_item_main_media_scroll{
			overflow:auto;
			overflow-y:hidden;
			.group_item_main_media_scroll_item{
				padding-bottom:100%;
				position: relative;
				img{
					position: absolute;
					top:0;
					left:0;
				}
			}
		}
		.group_item_main_button{
			position: absolute;
			top:0;
			left:0;
			right:0;
			bottom: 0;
			z-index: 3;
			/*box-shadow: inset 0 2px 20px rgba(0,0,0,.2);*/
		}
		.group_item_main_tags{
			position: absolute;
			bottom:5/@base;
			left:5/@base;
			width:28px;
			height:28px;
			padding:20/@base;
			background-color: rgba(0,0,0,.9);
			border-radius: 28px;
			overflow: hidden;
			transform: scale(.5);
			z-index: 3;
			i{
				display:block;
				margin:0 auto;
			}
		}
		img{
			height:100%;
			width:100%;
			border:0;
			overflow:hidden;
		}
	}
	.icon{
		&.tags{
			background-size: 355px 344px;
    		background-position: -175px -270px;
    		width:24px;
    		height:24px;
		}
	}
	.icon2{
		&.goodsed{
			background-size: 410px 396px;
    		background-position: 0 -149px;
    		margin-top:-38.5px;
			margin-left:-45px;
			width:90px;
			height:77px;
			left:50%;
			top:50%;
			z-index: 3;
			position: absolute;
			display: none;
			&.on{
				display:block;
			}
		}
		&.prev{
			width:30px;
			height:30px;
			background-size: 410px 396px;
			background-position: 0 -366px;
			top:50%;
			left:5%;
		}
		&.next{
			width:30px;
			height:30px;
			background-size: 410px 396px;
			background-position: -62px -366px;
			top:50%;
			right:5%;
		}
	}
	.coloraqua{
		background-color: #00ffff;
	}
	.colorcrimson{
		background-color: #dc143c;
	}
	.animated {
		animation-duration: .5s;
		animation-fill-mode: both;
		display:none;
	}
	@keyframes fadeInRight {
		0% {
			opacity: 1;
			transform: translate3d(100%, 0, 0)
		}

		to {
			opacity: 1;
			transform: none
		}

	}

	.fadeInRight {
		animation-name: fadeInRight;
		display: block;
		z-index: 2;
	}
	@keyframes fadeOutLeft {
		0% {
			opacity: 1
		}

		to {
			opacity: 1;
			transform: translate3d(-100%, 0, 0)
		}

	}

	.fadeOutLeft {
		animation-name: fadeOutLeft;
		display: block;
		z-index: 1;
	}
	@keyframes fadeInLeft {
		0% {
			opacity: 1;
			transform: translate3d(-100%, 0, 0)
		}

		to {
			opacity: 1;
			transform: none
		}

	}

	.fadeInLeft {
		animation-name: fadeInLeft;
		display: block;
		z-index: 1;
	}
	@keyframes fadeOutRight {
		0% {
			opacity: 1
		}

		to {
			opacity: 1;
			transform: translate3d(100%, 0, 0)
		}

	}

	.fadeOutRight {
		animation-name: fadeOutRight;
		display: block;
		z-index: 2;
	}
</style>